//定义游戏实例
var game = new soya2d.Game({
    container:'.banner-canvas'//使用CSS selector指定容器，如果不指定，默认body
});
//定义场景
var scene = new soya2d.Scene({
    onInit:function(game){
        //var path = new soya2d.Path("M400 50L500 250 L300 250");;
        var path = new soya2d.Path("M455 187L455 356L601 440L746 356L746 187L601 104L455 187");
        var path2= new soya2d.Path("M746 356L746 187L601 104L455 187L455 356L601 440L740 356");
        var path3= new soya2d.Path("M488 460L708 460L812 273L710 87L488 87L378 280L488 460");
        var path4= new soya2d.Path("M812 273L710 87L488 87L378 280L488 460L488 460L708 460L812 273");
        var hexagon1=new soya2d.Shape({
            onRender:function(g){
                g.fillStyle('rgba(255,255,255,0.1)');
                g.lineStyle(0.5);
                g.strokeStyle('rgba(255,255,255,0.5)');
                g.beginPath();

                g.path(path);
                g.fill();
                g.stroke();
            }
        });
        hexagon1.originTo(600,275);
        hexagon1.scaleTo(0.1);
        this.add(hexagon1)

        var hexagon2=new soya2d.Shape({
            onRender:function(g){
                g.fillStyle('rgba(255,255,255,0.08)')
                g.strokeStyle('rgba(255,255,255,0.5)');
                g.beginPath();
                g.path(path);
                g.fill();
                g.stroke();
            },
            onUpdate:function(game){
                //this.rotation=30
            }
        });
        hexagon2.originTo(600,275);
        hexagon2.opacifyTo(0);
        this.add(hexagon2)

        var hexagon3=new soya2d.Shape({
            onRender:function(g){
                g.fillStyle('rgba(255,255,255,0.04)')
                g.beginPath();
                g.path(path);
                g.fill();
            }
        });
        hexagon3.originTo(600,275);
        hexagon3.opacifyTo(0);
        hexagon3.scaleTo(1.3);
        this.add(hexagon3)

        var hexagon4=new soya2d.Shape({
            onRender:function(g){
                g.fillStyle('rgba(255,255,255,0.02)')
                g.beginPath();
                g.path(path);
                g.fill();
            },
            onUpdate:function(game){
                this.rotation=30
            }
        });
        hexagon4.originTo(600,275);
        hexagon4.opacifyTo(0);
        hexagon4.scaleTo(1.8);
        this.add(hexagon4)

        var text1=new soya2d.Text({
            text:'医信宝',
            x:472,
            y:104,
            w:400,
            opacity:0,

            fillStyle:'#fff',

        });
        text1.font.size(84);
        this.add(text1)

        var rrect = new soya2d.RRect({
            x:482,
            y:500,
            r:10,
            w:240,
            h:40,
            fillStyle:'#d5e4ff',
            opacity:0,
        });
        var text2=new soya2d.Text({
            text:'专注于企业理财',
            x:12,
            y:5,
            w:400,
            fillStyle:'#4c4baf'
        });
        text2.font.size(30);
        rrect.add(text2);
        this.add(rrect)

        var arc1 = new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#2aa664',
            w:10,
            x:452,
            y:187,
            opacity:0,
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var arc2 = new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#77a1db',
            w:12,
            x:740,
            y:356,
            opacity:0,
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var arc3 = new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#ff433e',
            w:18,
            x:488,
            y:460,
            opacity:0,
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var arc4 = new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#d5aa26',
            w:18,
            x:812,
            y:273,
            opacity:0,
            onUpdate:function() {
                //this.rotation++;
            }
        });
        this.add(arc1,arc2,arc3,arc4);

        var  noround1= new soya2d.Arc({
            startAngle:0,
            lineWidth:2,
            endAngle:0,
            strokeStyle:'#d5aa26',
            //fillStyle:'#d5aa26',
            w:90,
            x:300,
            y:116,
            opacity:0,


        });
        var  round1= new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#d5aa26',
            w:80,
            x:305,
            y:116,
            opacity:0,
            scaleX:'0',
            scaleY:'0',

        });
        var rtext1=new soya2d.Text({
            text:'免费服务',
            x:7,
            y:-5,
            w:80,
            fillStyle:'#fff'

        });
        rtext1.font.size(16);
        round1.add(rtext1);
        this.add(noround1,round1);
        //round1.fillStyle=soya2d.GRADIENTTYPE_RADIAL;

        var  noround2= new soya2d.Arc({
            startAngle:0,
            lineWidth:2,
            endAngle:0,
            strokeStyle:'#ff433e',
            //fillStyle:'#d5aa26',
            w:90,
            x:821,
            y:116,
            opacity:0,

        });
        var  round2= new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#ff433e',
            w:80,
            x:826,
            y:116,
            opacity:0,
            scaleX:'0',
            scaleY:'0',
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var rtext2=new soya2d.Text({
            text:'专人服务',
            x:7,
            y:-5,
            w:80,
            fillStyle:'#fff'
        });
        rtext2.font.size(16);
        round2.add(rtext2);

        this.add(noround2,round2);


        var  noround3= new soya2d.Arc({
            startAngle:0,
            lineWidth:2,
            endAngle:0,
            strokeStyle:'#b24ac8',
            //fillStyle:'#d5aa26',
            w:90,
            x:300,
            y:440,
            opacity:0,
        });
        var  round3= new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#b24ac8',
            w:80,
            x:305,
            y:440,
            opacity:0,
            scaleX:'0',
            scaleY:'0',
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var rtext3=new soya2d.Text({
            text:'灵活配置',
            x:7,
            y:-5,
            w:80,
            fillStyle:'#fff'
        });
        rtext3.font.size(16);
        round3.add(rtext3);
        this.add(noround3,round3);

        var  noround4= new soya2d.Arc({
            startAngle:0,
            lineWidth:2,
            endAngle:0,
            strokeStyle:'#2aa664',
            //fillStyle:'#d5aa26',
            w:90,
            x:821,
            y:440,
            opacity:0,
        });
        var  round4= new soya2d.Arc({
            startAngle:0,
            endAngle:360,
            fillStyle:'#2aa664',
            w:80,
            x:826,
            y:440,
            opacity:0,
            scaleX:'0',
            scaleY:'0',
            onUpdate:function() {
                //this.rotation++;
            }
        });
        var rtext4=new soya2d.Text({
            text:'收益更高',
            x:7,
            y:-5,
            w:80,
            fillStyle:'#fff'
        });
        //noround1.animate


        rtext4.font.size(16);
        round4.add(rtext4);
        this.add(noround4,round4);


        ///**********执行动画***************//


        hexagon1.animate({
            rotation:'60',
            scaleX:'1',
            scaleY:'1',
        },1000,{easing:soya2d.Tween.Quad.Out});
        hexagon2.animate({
            rotation:'90',
            scaleX:'1.3',
            scaleY:'1.3',
            opacity:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(1000);

        text1.animate({
            opacity:'1',
            y:'218',
        },2000,{easing:soya2d.Tween.Bounce.Out,
            onEnd:function(){

            }
        }).delay(2000);

        rrect.animate({
            y:'312',
            opacity:'1',
        },2000,{easing:soya2d.Tween.Bounce.Out,}).delay(2000);

        hexagon3.animate({
            rotation:'60',
            scaleX:'1.8',
            scaleY:'1.8',
            opacity:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(2000);

        hexagon4.animate({
            rotation:'90',
            scaleX:'3',
            scaleY:'3',
            opacity:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(3000);

        arc1.pathAnimate(path,10000,{
            easing:soya2d.Tween.Bounce.Out,
            onUpdate:function(t,ratio,angle){
                t.opacity=1;
                t.rotation = angle;
            }
        }).delay(3500);	;
        arc2.pathAnimate(path2,10000,{
            easing:soya2d.Tween.Bounce.Out,
            onUpdate:function(t,ratio,angle){
                t.opacity=1;
                t.rotation = angle;
            }
        }).delay(4000);
        arc3.pathAnimate(path3,10000,{
            easing:soya2d.Tween.Bounce.Out,
            onUpdate:function(t,ratio,angle){
                t.opacity=1;
                t.rotation = angle;
            }
        }).delay(4500);
        arc4.pathAnimate(path4,10000,{
            easing:soya2d.Tween.Bounce.Out,
            onUpdate:function(t,ratio,angle){
                t.opacity=1;
                t.rotation = angle;
            }
        }).delay(5000);
        noround1.animate({
            endAngle:'360',
            opacity:'1'
        },1000,{
            easing:soya2d.Tween.Quad.Out,
            onEnd:function(){
                noround1.animate({
                    scaleX:'1.5',
                    scaleY:'1.5',
                    opacity:'0',
                },1000,{iteration:-1,easing:soya2d.Tween.Quad.Out,})
            },
        }).delay(4000)
        round1.animate({
            opacity:'1',
            scaleX:'1',
            scaleY:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(5000);

        noround2.animate({
            endAngle:'360',
            opacity:'1'
        },4500,{
            easing:soya2d.Tween.Quad.Out,
            onEnd:function(){
                noround2.animate({
                    scaleX:'1.5',
                    scaleY:'1.5',
                    opacity:'0',
                },1000,{iteration:-1,easing:soya2d.Tween.Quad.Out,})
            },
        }).delay(4000)
        round2.animate({
            opacity:'1',
            scaleX:'1',
            scaleY:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(5500);

        noround3.animate({
            endAngle:'360',
            opacity:'1'
        },1000,{
            easing:soya2d.Tween.Quad.Out,
            onEnd:function(){
                noround3.animate({
                    scaleX:'1.5',
                    scaleY:'1.5',
                    opacity:'0',
                },1000,{iteration:-1,easing:soya2d.Tween.Quad.Out,})
            },
        }).delay(5000)
        round3.animate({
            opacity:'1',
            scaleX:'1',
            scaleY:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(6000);

        noround4.animate({
            endAngle:'360',
            opacity:'1'
        },1000,{
            easing:soya2d.Tween.Quad.Out,
            onEnd:function(){
                noround4.animate({
                    scaleX:'1.5',
                    scaleY:'1.5',
                    opacity:'0',
                },1000,{iteration:-1,easing:soya2d.Tween.Quad.Out,})
            },
        }).delay(5500)
        round4.animate({
            opacity:'1',
            scaleX:'1',
            scaleY:'1',
        },1000,{easing:soya2d.Tween.Quad.Out}).delay(6500);

    }
});
//设置该实例的缩放模式
game.view.scaleMode = soya2d.SCALEMODE_NOSCALE;
//启动场景
game.start(scene);
    









